import { Col, Radio, RadioChangeEvent } from 'antd';
import { Form } from "antd";

interface FormItemRadioProps {
    name: string,
    label: string,
    options: Object,
    onChange?: Function,
    value?: number | string | boolean
}

const getElement = (options: Object) => {
    return Object.entries(options).map(item => <Radio value={item[0]} key={item[0]}>{item[1]}</Radio>)
}

const FormItemRadio = (props: FormItemRadioProps) => {
    const onChange = (e: RadioChangeEvent) => {
        props.onChange && props.onChange(e);
    }
    return (
        <Col style={{margin:"16px 0"}}>
            <Form.Item required={true}  label={props.label} name={props.name}>
                <Radio.Group onChange={onChange}>
                    {getElement(props.options)}
                </Radio.Group>
            </Form.Item>
        </Col>

    );
}
export default FormItemRadio;
export type { FormItemRadioProps };